<script setup lang="ts">
import { get, loadFile, message, post, formatEnum } from '@/utils'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import avatar from '@/assets/avatar.png'
import { OrderStatus, PayStatus, PayType, RefundStatus, LogisticsType, PickupStatus } from '@/enum/order'
import { Badge } from '@arco-design/web-vue'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  userId: props.id,
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: 'server-shop/sys-seller/order/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const columns = formatColumns([
  {
    title: 'id',
    dataIndex: 'id',
    // hideInSearch: false,
    width: 200,
  },
  {
    title: '订单编号',
    dataIndex: 'orderNo',
    hideInSearch: false,
    width: 200,
  },

  {
    title: '商品名称',
    dataIndex: 'goods',
    width: 200,
    align: 'left',
    ellipsis: true,
  },

  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    valueType: 'select',
    valueEnum: {
      [OrderStatus.取消交易]: { text: '取消交易', status: 'normal' },
      [OrderStatus.已完成]: { text: '已完成', status: 'success' },
      [OrderStatus.待付款]: { text: '待付款', status: 'warning' },
      [OrderStatus.待发货]: {
        text: '待发货/待备货',
        status: 'processing',
      },
      [OrderStatus.待签收]: { text: '待签收', status: 'processing' },
    },
    hideInSearch: false,
    render: ({ record }) => {
      // 遍历判断是否部分发货
      const isSectionSend = record.orderDetailList.some(f => f.logisticsNum > 0)
      const valueEnum = {
        [OrderStatus.取消交易]: { text: '取消交易', status: 'normal' },
        [OrderStatus.已完成]: { text: '已完成', status: 'success' },
        [OrderStatus.待付款]: { text: '待付款', status: 'warning' },
        [OrderStatus.待发货]: {
          text: isSectionSend ? '部分发货' : '待发货/待备货',
          status: 'processing',
        },
        [OrderStatus.待签收]: { text: '待签收/待自提', status: 'processing' },
      }
      const item = valueEnum[record.orderStatus]
      return h(Badge, { status: item.status, text: item.text })
    },

    width: 150,
  },
  {
    title: '评价状态',
    dataIndex: 'commentStatus',
    valueEnum: {
      0: '未评价',
      1: '已评价',
    },
    width: 120,
  },

  {
    title: '实付金额',
    dataIndex: 'orderPrice',
    width: 100,
  },
  {
    title: '支付状态',
    dataIndex: 'payStatus',
    valueType: 'select',
    width: 100,
    valueEnum: {
      0: { text: '未支付', status: 'Error' },
      1: { text: '已支付', status: 'Success' },
    },
  },
  // {
  //   title: '支付类型',
  //   dataIndex: 'payType',
  //   valueEnum: formatEnum(PayType),
  //   width: 100,
  // },

  {
    title: '物流类型',
    dataIndex: 'logisticsType',
    width: 100,
    valueEnum: formatEnum(LogisticsType),
    valueType: 'select',
  },
  {
    title: '售后状态',
    dataIndex: 'refundStatus',
    width: 100,
    hideInSearch: false,
    valueType: 'select',
    valueEnum: formatEnum(RefundStatus),
  },

  {
    title: '收件信息',
    dataIndex: 'addressInfo',
    width: 200,
    children: [
      {
        title: '收件人',
        dataIndex: 'addressName',
        width: 100,
        ellipsis: true,
      },
      {
        title: '联系方式',
        dataIndex: 'addressMobile',
        ellipsis: true,
        width: 150,
      },
      {
        title: '收件地址',
        dataIndex: 'address',
        width: 200,
        ellipsis: true,
      },
    ],
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    width: 200,
  },
  {
    title: '发货时间',
    dataIndex: 'sendTime',
    width: 200,
  },
  {
    title: '订单备注',
    dataIndex: 'remark',
    width: 120,
    ellipsis: true,
  },
])
</script>

<template>
  <CModal v-model:visible="props.show" width="1300px" :footer="false" title="历史订单" @cancel="emit('update:show', false)">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" :scroll="{ x: 1000 }" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #userAvatar="{ record }">
        <a-image width="30" :src="record.userAvatar || avatar"></a-image>
      </template>
      <template #goods="{ record }">
        <a-space direction="vertical">
          <div class="flex" v-for="item in record.orderDetailList">
            <a-image width="50" :src="item.goods.img" />
            <div>
              <p>{{ item.goods.name }}</p>
              <p>{{ item.spec }}</p>
            </div>
          </div>
        </a-space>
      </template>
      <template #img="{ record }">
        <a-image-preview-group infinite>
          <a-space>
            <template v-for="(img, index) in record.img.split(',')">
              <a-image :src="img" width="50" />
            </template>
          </a-space>
        </a-image-preview-group>
      </template>
    </ProTable>
    <AddModal v-if="store.show" v-model:show="store.show" :id="props.id" @confirm="actionRef.reload" />
  </CModal>
</template>
